<template>
    <div class="lunbo">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" />
            </van-swipe-item>
        </van-swipe>
    </div>
    <div class="rank">
        <h1>排行榜</h1>
        <div class="rank-wrapper">
            <div class="rank-item" v-for="item of rank.list">
                <img :src="item.coverImgUrl" alt="">
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from "vue";
    import axios from "axios"
    //轮播图
    const images = ref([
        'https://i02piccdn.sogoucdn.com/b0116b4157fe8399',
        'https://img1.baidu.com/it/u=737173539,630476337&fm=253&fmt=auto&app=120&f=JPEG?w=1016&h=500',
        "https://img2.baidu.com/it/u=1720921439,2375224645&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=247",
        "https://img2.baidu.com/it/u=3016313396,22170297&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=240"
    ]);
    //排行榜数据
    const rank = ref([])
    const getData = axios.get("https://koo-music.vercel.app/toplist").then((res) =>{
        rank.value = res.data
        console.log(rank.value)
    })
</script>

<style scoped lang="less">
    .my-swipe{
        margin-top: 10rem;
    }
    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20rem;
        line-height: 150rem;
        text-align: center;
        background-color: #39a9ed;
        object-fit: cover;
        height:150rem;
        background-color: transparent;
    }
    .van-swipe-item img{
        height:100%;
        width:80%;
        border-radius: 7rem;
    }
    .rank{
        padding-left: 20rem;
        width: 330rem;
    }
    .rank-wrapper{
        display: flex;
        flex-wrap: wrap;
    }
    .rank h1{
        font-size: 25rem;
    }
    .rank-item{
        width:32.5%;
        margin-right: 2rem;
    }
    .rank-item img{
        width: 100%;
    }
</style>